<template>
  <div class="app-container">
    <div class="sidebar">
      <div class="sidebar-logo"></div>
      <el-menu
        :default-active="currentRoute.path"
        router
        class="sidebar-menu"
        text-color="#222"
        active-text-color="#006AFD"
        unique-opened
        :collapse-transition="false"
      >
        <template v-for="item in menuList" :key="item.path">
          <el-menu-item :index="item.path" v-if="!item.children.length">
            <div class="menu-item-wrapper">
              <img
                v-if="item.icon"
                :src="item.icon"
                class="menu-icon default-icon"
                alt="icon"
              />
              <img
                v-if="item.activeIcon"
                :src="item.activeIcon"
                class="menu-icon active-icon"
                alt="icon"
              />
              <span>{{ item.label }}</span>
            </div>
          </el-menu-item>
          <el-sub-menu :index="item.path" v-else>
            <template #title>
              <div class="menu-item-wrapper">
                <img
                  v-if="item.icon"
                  :src="item.icon"
                  class="menu-icon default-icon"
                  alt="icon"
                />
                <img
                  v-if="item.activeIcon"
                  :src="item.activeIcon"
                  class="menu-icon active-icon"
                  alt="icon"
                />
                <span>{{ item.label }}</span>
              </div>
            </template>
            <el-menu-item
              v-for="child in item.children"
              :key="child.path"
              :index="child.path"
            >
              <span>{{ child.label }}</span>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
    <div class="main-content">
      <div class="top-bar">
        <BreadCrumb :current-path="currentRoute.path" />
        <div class="top-bar-actions">
          <div
            class="user-info"
            ref="dropdownRef"
            v-click-outside="closeDropdown"
          >
            <el-dropdown
              :visible="isDropdownVisible"
              @visible-change="handleVisibleChange"
              trigger="click"
            >
              <span class="user-trigger">
                <el-avatar class="avatar" :src="userImg" />
                <span class="username">{{ username }}</span>
                <el-icon
                  :size="16"
                  class="arrow"
                  :class="{ rotate: isDropdownVisible }"
                >
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="toLogout"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="lang-switch">
            <div
              v-for="(item, index) in langList"
              :key="index"
              @click="switchLanguage(index)"
              :class="['lang-item', currLangIndex === index ? 'active' : '']"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="page-content">
        <el-config-provider :locale="elLocale">
          <router-view />
        </el-config-provider>
        <div class="footerTime">
          <p>{{ $t("common.curTime") }}(UTC)：{{ utcTime }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import {
  ElMenu,
  ElMenuItem,
  ElSubMenu,
  ElConfigProvider,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElAvatar,
  ElIcon,
} from "element-plus";
import { ClickOutside as vClickOutside } from "element-plus";
import { useUserStore } from "@/store/modules/user";
import { ArrowDown } from "@element-plus/icons-vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { useTime } from "@/utils/tools/useTime";
import userImg from "@/assets/images/user/user.png";
import BreadCrumb from "./components/BreadCrumb.vue";
import { systemUsersMeApi } from "@/api/user";

// 用户的登录,登出等操作
const userStore = useUserStore();
const router = useRouter();

const menuList = [
  {
    label: "首页",
    path: "/page/home",
    icon: require("@/assets/images/home/Home.png"),
    activeIcon: require("@/assets/images/home/Home1.png"),
    children: [],
  },
  {
    label: "监控数据",
    path: "/page/monitoring",
    icon: require("@/assets/images/home/Electrocardiogram.png"),
    activeIcon: require("@/assets/images/home/Electrocardiogram1.png"),
    children: [],
  },
  {
    label: "基础数据",
    path: "/page/basic",
    icon: require("@/assets/images/home/Internal-data.png"),
    activeIcon: require("@/assets/images/home/Internal-data1.png"),
    children: [
      { label: "机场数据", path: "/page/basic/airport", children: [] },
      { label: "区域数据", path: "/page/basic/area", children: [] },
      { label: "航路数据", path: "/page/basic/route", children: [] },
      { label: "历书数据", path: "/page/basic/ephemeris", children: [] },
      { label: "NANU数据", path: "/page/basic/nanu", children: [] },
      { label: "NOTAM数据", path: "/page/basic/notam", children: [] },
    ],
  },
  {
    label: "用户管理",
    path: "/page/user",
    icon: require("@/assets/images/home/Woman.png"),
    activeIcon: require("@/assets/images/home/Woman1.png"),
    children: [
      { label: "用户审批", path: "/page/user/approval", children: [] },
      { label: "用户管理", path: "/page/user/manage", children: [] },
      // { label: "角色管理", path: "/page/user/role", children: [] },
    ],
  },
  {
    label: "日志查询",
    path: "/page/log",
    icon: require("@/assets/images/home/Doc-search-two.png"),
    activeIcon: require("@/assets/images/home/Doc-search-two1.png"),
    children: [
      { label: "用户日志查询", path: "/page/log/user", children: [] },
      { label: "运行日志查询", path: "/page/log/operation", children: [] },
      // { label: "系统日志查询", path: "/page/log/system", children: [] },
    ],
  },
  {
    label: "系统公告",
    path: "/page/announcement",
    icon: require("@/assets/images/home/Announcement.png"),
    activeIcon: require("@/assets/images/home/Announcement1.png"),
    children: [],
  },
];

const currentRoute = useRoute();

// 国际化逻辑
const { locale } = useI18n();
const langList = ref([
  { name: "中", lang: "zh-cn" },
  { name: "EN", lang: "en" },
]);
const currLangIndex = ref(0);
const elLocale = computed(() => {
  return currLangIndex.value === 0 ? zhCn : en;
});

const switchLanguage = (index) => {
  const selectedLang = langList.value[index]["lang"];
  currLangIndex.value = index;
  locale.value = selectedLang;
  localStorage.setItem("language", selectedLang);
};
// 用户信息与下拉菜单
const username = ref("用户名");
const { utcTime } = useTime();
const isDropdownVisible = ref(false);
const dropdownRef = ref(null);
const closeDropdown = () => (isDropdownVisible.value = false);
const handleVisibleChange = (visible) => (isDropdownVisible.value = visible);
// 登出
const toLogout = () => {
  userStore
    .logout()
    .then((res) => {
      if (res.code && res.code === 200) {
        router.push("/login");
      }
    })
    .catch((error) => {
      console.error("登录接口报错详情：", error);
    });
};
const getSystemUsersMe = async () => {
  const { code, data } = await systemUsersMeApi();
  if (code === 200) {
    username.value = data.userName;
  }
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};
onMounted(() => {
  const savedLang = localStorage.getItem("language");
  if (savedLang) {
    const langIndex = langList.value.findIndex(
      (item) => item.lang === savedLang
    );
    if (langIndex !== -1) {
      currLangIndex.value = langIndex;
      locale.value = savedLang;
    }
  }
  getSystemUsersMe();
});
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
}

.sidebar {
  width: 232px;
  height: 100vh;
  overflow: hidden;
  flex-shrink: 0;
  border-right: 1px solid rgba(34, 34, 34, 0.1);
  background: #fff;

  .sidebar-logo {
    width: 100%;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../../assets/images/home/logo.png");
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .sidebar-menu {
    border-right: none;
    background-color: #fff;
    --el-menu-animation-duration: 0s !important;
    --el-menu-active-color: #006afd !important;
    --el-menu-text-color: #222 !important;

    :deep(.el-sub-menu) {
      &.is-opened .el-sub-menu__list {
        animation: none !important;
      }
    }

    :deep(.el-sub-menu__popup) {
      transition: none !important;
      animation: none !important;
      border-radius: 28px !important;
      background: #fff !important;
      box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.02) !important;
      border: none !important;
      padding: 4px 0 !important;
      overflow: hidden !important;
      min-width: 212px !important;
      margin-top: 0 !important;
    }

    .menu-item-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      span {
        float: left;
        margin-left: 26px;
      }
    }

    .menu-icon {
      width: 18px;
      height: 18px;
      margin-right: 8px;
      vertical-align: middle;
      position: absolute;
      left: 16px;
    }
    .default-icon {
      display: block;
    }
    .active-icon {
      display: none;
    }

    .el-menu-item:hover .menu-item-wrapper .default-icon,
    :deep(
        .el-sub-menu:hover .el-sub-menu__title .menu-item-wrapper .default-icon
      ),
    .el-menu-item.is-active .menu-item-wrapper .default-icon,
    :deep(
        .el-sub-menu.is-active
          .el-sub-menu__title
          .menu-item-wrapper
          .default-icon
      ) {
      display: none;
    }
    .el-menu-item:hover .menu-item-wrapper .active-icon,
    :deep(
        .el-sub-menu:hover .el-sub-menu__title .menu-item-wrapper .active-icon
      ),
    .el-menu-item.is-active .menu-item-wrapper .active-icon,
    :deep(
        .el-sub-menu.is-active
          .el-sub-menu__title
          .menu-item-wrapper
          .active-icon
      ) {
      display: block;
    }

    .el-menu-item,
    :deep(.el-sub-menu .el-sub-menu__title) {
      height: 40px !important;
      margin: 2px 20px !important;
      padding: 0 16px !important;
      font-size: 14px !important;
      border-radius: 28px !important;
      transition: none !important;
      align-items: center !important;
      background: transparent !important;
      font-weight: 400 !important;
      display: flex !important;
      position: relative;
    }

    .el-menu-item:hover,
    :deep(.el-sub-menu:hover .el-sub-menu__title) {
      background: #e5f0ff !important;
      color: #006afd !important;
      font-weight: 400 !important;
      box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.02) !important;
    }

    .el-menu-item.is-active,
    :deep(.el-sub-menu.is-active .el-sub-menu__title) {
      background: #e5f0ff !important;
      color: #006afd !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.02) !important;
    }

    :deep(.el-sub-menu .el-sub-menu__icon-arrow) {
      right: 20px !important;
      color: inherit !important;
      transition: none !important;
    }
    :deep(.el-sub-menu__popup .el-menu-item) {
      height: 48px !important;
      margin: 0 !important;
      padding: 4px 36px !important;
      font-size: 16px !important;
      border-radius: 28px !important;
      transition: none !important;
    }
    :deep(.el-sub-menu__popup .el-menu-item:hover),
    :deep(.el-sub-menu__popup .el-menu-item.is-active) {
      background: #e5f0ff !important;
      color: #006afd !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.02) !important;
    }
  }
}
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  .top-bar {
    height: 55px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .top-bar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .lang-switch {
    display: flex;

    .lang-item {
      width: 34px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 1px solid #006afd;
      background: #e7f0fd;
      color: #7a7a7a;

      &.active {
        color: #fff;
        font-weight: 700;
        border: 1px solid #006afd;
        background: #006afd;
      }
    }
  }

  .user-info {
    .user-trigger {
      display: flex;
      align-items: center;
      cursor: pointer;

      .avatar {
        width: 32px;
        height: 32px;
        margin-right: 8px;
      }

      .username {
        display: inline-block;
        line-height: 16px;
        margin-right: 4px;
        font-size: 14px;
        min-width: 46px;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .arrow {
        transition: transform 0s;
      }

      .rotate {
        transform: rotate(180deg);
      }
    }
  }

  .page-content {
    padding: 10px;
    height: calc(100vh - 55px);
    // height: 100%;
    box-sizing: border-box;
    // min-height: calc(100vh - 55px);
    overflow-y: auto;
  }

  .footerTime {
    width: 100%;
    height: 28px;
    background-color: #e6e8eb;

    p {
      color: #222;
      text-align: right;
      font-size: 12px;
      line-height: 28px;
      padding-right: 16px;
    }
  }
}
:deep(.el-menu--popup) {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
:deep(.el-sub-menu .el-menu-item) {
  text-indent: 26px;
}
</style>
